<template>
    <el-form ref="ruleFormRef" :model="RuleForm" label-width="auto" :rules="rules" size="large" status-icon >
            <el-form-item prop="name" label="项目名称">
                <el-input v-model="RuleForm.name" />
            </el-form-item>
            <el-form-item prop="content" label="施工内容">
                <el-input v-model="RuleForm.content" />
            </el-form-item>
            <el-form-item prop="unit" label="单位">
                <el-input v-model="RuleForm.unit" />
            </el-form-item>
            <el-form-item prop="work_quantity" label="数量">
                <el-input-number style="width: 100%;" v-model="RuleForm.work_quantity" />
            </el-form-item>
            <el-form-item prop="unit_price" label="材料单价">
                <el-input-number style="width: 100%;" v-model="RuleForm.unit_price" :precision="2" @change="onChange" />
            </el-form-item>
            <el-form-item prop="price" label="合价">
                <el-text>{{ RuleForm.price }}</el-text>
            </el-form-item>
            <el-form-item prop="remarks" label="备注">
                <el-input v-model="RuleForm.remarks" type="textarea" />
            </el-form-item>
        </el-form>
        <div class="text-center">
            <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref,watch } from 'vue'
import { type FormInstance, type FormRules } from 'element-plus'
const loading = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
    id:number
    name:string
    content:string
    unit:string
    work_quantity:number
    price:number | string
    unit_price:number
    remarks:string
}

const RuleForm = ref<RuleForm>({
    id:0,
    name:'',
    content:'/',
    unit:'/',
    work_quantity:0,
    price:0,
    unit_price:0,
    remarks:''
})

const props = defineProps<{
    data:any
}>()

watch(props,()=>{
    RuleForm.value = props.data
},{ immediate: true })

const onChange = () => {
    // 税额 = 金额 / (1 + 税率) * 税率
    RuleForm.value.price = (RuleForm.value.unit_price * RuleForm.value.work_quantity).toFixed(2)
}

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '请输入内容', trigger: 'blur' },
    ],
    unit: [
        { required: true, message: '请输入单位', trigger: 'blur' },
    ],
    work_quantity: [
        { required: true, message: '请输入数量', trigger: 'blur' },
    ],
    unit_price: [
        { required: true, message: '请输入单价', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            emit('onDetails',RuleForm.value)   
        } else {
            console.log('error submit!', fields)
        }
    })
}

const emit = defineEmits(['onDetails'])
</script>
<style scoped>
</style>
